<template>
    <div class="modal fade" id="change_pwd" tabindex="-1" role="dialog"
         aria-labelledby="change_pwd">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="popup_box">
                        <div class="g-form-line">
                            <div class="newList_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">
                                        <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                    </span>
                                </button>
                                <p class="text_font">修改密码</p>
                            </div>
                            <div class="newList_right">
                                <p class="text_1">旧密码： </p>
                                <p class="text_2"><input type="password" maxlength="12" v-model="oldPwd"></p>
                                <p class="text_3">新密码：</p>
                                <p class="text_4"><input type="password" maxlength="12" v-model="newPwd"></p>
                                <p class="text_5">确认密码： </p>
                                <p class="text_6"><input type="password" maxlength="12" v-model="repeatPwd"></p>
                                <p class="text_7">密码长度不能大于20</p>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-success" @click="confirm">确定</button>
                                    <button type="button" class="btn btn-success export" data-dismiss="modal">取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                oldPwd: '',
                newPwd: '',
                repeatPwd: ''
            }
        },
        methods: {
            confirm () {
                if (this.oldPwd === '' || this.newPwd === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.required})
                    return
                }
                if (this.oldPwd === this.newPwd) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.same})
                    return
                }
                if (this.newPwd !== this.repeatPwd) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.diff})
                    return
                }
                if (this.newPwd.length > 20) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.password.pwdLength})
                    return
                }
                let params = {
                    oldPassword: this.oldPwd,
                    newPassword: this.newPwd,
//                    userNickname: this.$store.state.adminInfo.userNickname,
                }
                console.log(this.$store.state.adminInfo)
                this.$ajax
                    .userInfo
                    .updatePwd(this.$store.state.adminInfo.id, params)
                    .then((res) => {
                        let data = res.data
                        if (data.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.updateSuc})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#change_pwd').modal('hide')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    $('#change_pwd').modal('hide')
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        }
    }

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .popup_box {
        width: 580px;
        height: 400px;
    }

    .g-form-line {
        float: left;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: center;
    }

    .newList_left {
        position: relative;
        width: 180px;
        height: 100%;
        background: #263238;
        float: left;
        font-size: 16px;
        text-align: center;
        line-height: 362px;
        color: rgb(23, 210, 156);
    }

    .text_font {
        position: absolute;
        left: 60px;
        text-align: center;
        height: 100%;
        margin: 0;
        font-size: 14px;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 15px;
    }

    .newList_right {
        position: relative;
        width: 400px;
        height: 400px;
        margin-left: 180px;
        font-size: 16px;
        color: rgb(153, 153, 153);

    }

    .newList_right input {
        border: 0;
        height: 32px;
        width: 300px;
        color: rgb(23, 210, 156);
    }

    .newList_right div {
        width: 300px;
        display: inline-block;
        text-align: left;
        line-height: 30px;
    }

    .newList_right .text_1 {
        position: absolute;
        top: 65px;
        left: 30px;
        height: 36px;
        line-height: 36px;
        color: rgb(153, 153, 153);
        font-size: 12px;
    }

    .newList_right .text_2 {
        position: absolute;
        top: 95px;
        height: 36px;
        width: 300px;
        left: 30px;
        border-bottom: solid 1px;
        border-color: rgb(204, 204, 204);
    }

    .newList_right .text_3 {
        position: absolute;
        top: 135px;
        left: 30px;
        height: 36px;
        line-height: 36px;
        color: rgb(153, 153, 153);
        font-size: 12px;
    }

    .newList_right .text_4 {
        position: absolute;
        top: 165px;
        height: 36px;
        width: 300px;
        left: 30px;
        border-bottom: solid 1px;
        border-color: rgb(204, 204, 204);
    }

    .newList_right .text_5 {
        position: absolute;
        top: 205px;
        left: 30px;
        height: 36px;
        line-height: 36px;
        color: rgb(153, 153, 153);
        font-size: 12px;
    }

    .newList_right .text_6 {
        position: absolute;
        top: 235px;
        height: 36px;
        width: 300px;
        left: 30px;
        border-bottom: solid 1px;
        border-color: rgb(204, 204, 204);
    }

    .newList_right .text_7 {
        position: absolute;
        top: 282px;
        height: 36px;
        width: 300px;
        text-align: left;
        color: rgb(213, 76, 76);
        font-size: 12px;
        left: 30px;
    }

    .modal-body {
        padding: 0;
    }

    .modal-footer {
        position: absolute;
        top: 305px;
        left: 30px;
        border: 0;
    }
</style>
